<template>
    <div class="goodsListOut">

        <!--内容区域 -->

        <!-- 搜索区域 -->
        <div ref="elrow">
            <el-row :gutter="16">
                <el-form :model="searchForm" style="display: flex; flex-direction: row;flex-wrap: wrap;"
                    ref="searchForm">
                    <template v-for="(item, index) in searchList">
                        <el-col :span="6" v-if="item.type == 'datetimerange'">
                            <el-form-item :label="item.name" style="display:flex;">
                                <el-date-picker v-model="searchForm[item.key]" :type="item.type || 'datetimerange'"
                                    range-separator="至" style="width: 100%" :format="item.format || 'yyyy - MM - dd'"
                                    value-format="yyyy-MM-dd" start-placeholder="创建日期" end-placeholder="结束日期"
                                    :clearable="item.clearable || true" @change="changeDataPicker">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if="item.type == 'input'">
                            <el-form-item :label="item.name" :prop="item.key" style="display:flex;">
                                <el-input v-model="searchForm[item.key]" :placeholder="item.placeholder"
                                    :clearable="item.clearable || true" style="width: 100%;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if="item.type == 'select'">
                            <el-form-item :label="item.name" :prop="item.key" style="display:flex;">
                                <el-select v-model="searchForm[item.key]" :clearable="item.clearable || true"
                                    :placeholder="item.placeholder" style="width: 100%;">
                                    <el-option v-for="option in item.selectList" :key="option.value"
                                        :label="option.label" :value="option.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if="item.type == 'textarea'">
                            <el-form-item :label="item.name" :prop="item.key" style="display:flex;">
                                <el-input v-model="basicDlgFormData[item.key]" :placeholder="item.placeholder"
                                    type="textarea" :rows="item.rows || 2" :clearable="item.clearable || true" autosize
                                    style="width: 100;" />
                            </el-form-item>
                        </el-col>
                    </template>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
                        </el-form-item>
                    </el-col>

                </el-form>
            </el-row>
        </div>
        <!-- 其它操作区域 -->
        <div class="crudDiv" ref="crudDiv">
            <el-row :gutter="16">
                <template v-for="(item, index) in crudList">
                    <el-col :span="1" style="margin-right: 10px;">
                        <el-button :icon="item.icon || ''" :type="item.type || 'primary'" @click="operate(item,doSelectList)">{{
                            item.name }}</el-button>
                    </el-col>
                </template>
            </el-row>
        </div>
        <!-- 数据区域 -->
        <div style="margin:20px 0;">
            <el-table :data="tableData" style="width: 100%" :border="true" @selection-change="doSelectChange"
                :row-class-name="tableRowClassName" :header-cell-style="{ background: '#D0DDEA', color: '#637381' }"
                highlight-current-row ref="eltable" :height="elTableHeight + 'px'">
                <template v-for="(item, index) in columnData">

                    <el-table-column :type="item.type || 'selection'" v-if="item.type == 'selection'" width="80px"
                        :indeterminate="true" fixed="left" align='center'></el-table-column>
                    <el-table-column :type="item.type || 'index'" v-if="item.type == 'index'" label="序号" align='center'
                        width="50"></el-table-column>

                    <el-table-column :prop="item.prop" :label="item.label" align='center' :show-overflow-tooltip="true"
                        v-if="item.type == 'text'"></el-table-column>


                    <el-table-column :label="item.label" align='center' v-if="item.type == 'imgText'">
                        <template slot-scope="scope">
                            <img :src="scope.row[item.prop]" style="width: 50px; height: 50px;" />
                        </template>
                    </el-table-column>

                    <el-table-column :label="item.label" align='center' v-if="item.type == 'priceText'">
                        <template slot-scope="scope">
                            <span>￥{{ Number(scope.row[item.prop]).toFixed(2) }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column :label="item.label" align='center' v-if="item.type == 'tagText'">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row[item.prop] == 0">正常</el-tag>
                            <el-tag type="danger" v-else>禁用</el-tag>
                        </template>
                    </el-table-column>
                </template>
                <el-table-column fixed="right" label="操作" align='center'>
                    <template slot-scope="scope">
                        <vue-fragment v-for="(itemBtn, index) in tableCrudList"><el-link style="margin: 0 5px;"
                                :type="itemBtn.type || 'primary'" @click="operate(itemBtn, scope.row)">{{ itemBtn.name
                                }}</el-link>
                        </vue-fragment>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div style="display: flex;justify-content: space-between;" ref="elPagination">
            <el-pagination layout="total" :total="pagination.total">
            </el-pagination>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                :current-page="pagination.currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pagination.pageSize"
                layout="sizes, prev, pager, next, jumper" :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>



<script>
export default {
    name: "BasicTable",
    data() {
        return {
            searchForm: {},
            elTableHeight: null,
            doSelectList:[]
        }
    },
    props: {
        tableData: {
            type: Array,
            required: true,
            default: () => [],
        },
        searchList: {
            type: Array,
            default: () => [],
        },
        crudList: {
            type: Array,
            required: false,
            default: () => [],
        },
        tableCrudList: {
            type: Array,
            required: false,
            default: () => [],
        },
        pagination: {
            type: Object,
            default: () => {
                return { currentPage: 1, pageSize: 10, total: 20 };
            },
        },
        columnData: {
            type: Array,
            default: () => [],
        },
    },
    created() {

    },
    //页面销毁时触发
    beforeMount() {
        window.onresize = null
    },
    mounted() {

        this.getEltableHeight()
        //页面缩放时触发该函数
        window.onresize = () => {
            this.getEltableHeight()
        }

    },
    methods: {
        doSelectChange(e) {
            console.log(e)
            this.doSelectList=e
        },
        //页面数据
        handleSizeChange(e) {
            this.pagination.pageSize = e
            this.$emit("handleSizeChange", { ...this.searchForm, ...this.pagination });
        },
        //页数
        handleCurrentChange(e) {
            this.pagination.currentPage = e
            this.$emit("handleSizeChange", { ...this.searchForm, ...this.pagination });
        },
        //重置
        reset() {
            this.searchForm = {}
            this.$emit("reset", this.searchForm);
        },
        //搜索
        search() {
            this.$emit("search", this.searchForm);
        },
        //操作。增删改查等,参数
        //btnType：操作类型，data：传递数据
        operate(btnType, data) {
            this.$emit("operate", btnType, data);
        },
        //日期更改触发事件
        changeDataPicker(data) {
            if (data) {
                this.searchForm.startTime = data[0]
                this.searchForm.endTime = data[1]
            } else {
                this.searchForm.startTime = null
                this.searchForm.endTime = null
            }
        },
        //自定义表格行类名
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 === 1) {
                return 'custom_stripe' //自定义样式的类名
            } else {
                return ''
            }
        },
        //el-table的高度
        getEltableHeight() {
            //页面视图高度-搜索列表的高度-分页器高度-头部高度(60)-el-table margin高度(40)-el-main padding高度(40)
            this.elTableHeight = document.documentElement.clientHeight - this.$refs.elrow.offsetHeight - this.$refs.elPagination.offsetHeight - this.$refs.crudDiv.offsetHeight - 60 - 40 - 40;

        },
    }
}
</script>

<style scoped>
/* 用来设置表格的斑马纹*/
::v-deep .custom_stripe {
    background-color: #E7ECEE;
}

::v-deep .el-form-item__content {
    flex: 1;
}

/* 用来设置当前页面element全局table 选中某行时的背景色*/
::v-deep .el-table__body tr.current-row>td {
    background-color: #8BC7FF !important;
    color: #fff;
}
</style>